<!DOCTYPE html>
<html>
<head>
	<title>EaselJS: Simple Graphics Example</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script type="text/javascript">
	var canvas;
	var stage;
	function init() {
	    canvas = document.getElementById('myCanvas');
	    width = canvas.width;
	    height = canvas.height;
	    stage = new createjs.Stage(canvas);

	    var s = drawSmiley();
		s.x = (960-350)/2;
		s.y = 20;
	    stage.addChild(s);
	    stage.update();

	}

	function drawSmiley() {
	    var s = new createjs.Shape();
	    var g = s.graphics;

	    //Head
	    g.setStrokeStyle(15, 'round', 'round');
	    g.beginStroke("#000");
	    g.beginFill("#F00");
	    g.drawCircle(170, 170, 170); //55,53
	    g.endFill();
	    g.setStrokeStyle(1, 'round', 'round');

	    //Right eye
	    g.setStrokeStyle(5, 'round', 'round');
	    g.beginStroke("#000");
	    g.beginFill("#000");
	    g.drawRoundRect(125, 64, 20, 50, 10);
	    g.endFill();

	    //Left eye
	    g.setStrokeStyle(5, 'round', 'round');
	    g.beginStroke("#000");
	    g.beginFill("#000");
	    g.drawRoundRect(200, 64, 20, 50, 10);
	    g.endFill();

	    //Mouth
	    g.setStrokeStyle(15, 'round', 'round');
	    g.beginStroke("#000");
	    g.moveTo(45, 155);
	    g.bezierCurveTo(83, 307, 254, 317, 296, 152);
	    return s;
	}

	</script>

</head>
<body onload="init()">

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> Simple Graphics Example</h1>
	    <p>This example draws a set of vector shapes as a smiley face.</p>
	</header>

	<canvas id="myCanvas" width="960" height="400"></canvas>

</body>
</html>